<template>
  <demoBlock title="单选" class="demo-calendar">
    <vcu-cell title="选择单个日期" :value="date" @click="singleShow = true" />
    <vcu-calendar
      v-model:visible="singleShow"
      :default-date="singleDefaultDate"
      @confirm="onConfirmSingle"
    />
  </demoBlock>
</template>
<script>
import dayjs from "dayjs";
import { ref } from "vue";
export default {
  setup() {
    const singleDefaultDate = new Date(dayjs().add(7, 'day').format("YYYY/MM/DD"));
    const date = ref("");
    const singleShow = ref(false);
    const onConfirmSingle = (value) => {
      date.value = dayjs(value).format("YYYY-MM-DD");
    };

    return {
      singleDefaultDate,
      date,
      singleShow,
      onConfirmSingle,
    };
  },
};
</script>
